<template>
  <div class="item-container">
    <div class="item-icon">
      <svg-icon icon-class="tijiao"/>
    </div>
    <div class="item-fun">
      <div class="item-title">{{ title }}</div>
      <el-button class="item-button" type="primary" plain size="mini" v-if="!isSuccess" @click="isSuccess = true">去设置</el-button>
      <el-button class="item-button" type="success" plain size="mini" v-else @click="isSuccess = falsse">已完成</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuideItem',
  props: {
    title: {
      type: String,
      required: true
    },
    isSuccess: {
      type: Boolean,
      required: true,
      default: false
    }
  },
}
</script>

<style lang="css" scoped>
.item-container{
  margin: 15px;
  display: inline-flex;
  /* flex: 1; */
  min-width: 150px;
  height: 85px;
  background-color: #fff;
  border: 1px solid rgb(243, 243, 243);
  border-radius: 5px;
  padding: 5px 10px;
  width: 180px;
}
.item-icon{
  flex: 1;
  line-height: 85px;
  font-size: 35px;
  text-align: center;
}
.item-fun{
  flex: 2;
  padding: 10px 5px;
  text-align: center;
  box-sizing: border-box;
}
.item-title{
  color: #8e8e8e;
  font-size: 14px;
}
.item-button{
  margin: 15px auto;
}
</style>